<template>
  <view>
    <nut-tabbar v-model="active" bottom safe-area-inset-bottom placeholder active-color="#a3d182">
      <nut-tabbar-item v-for="(item, index) in List" 
        :key="item.title" 
        :tab-title="item.title" 
        :icon="item.icon" 
        @tap="tabSwitch(index,item.path)">
      </nut-tabbar-item>
    </nut-tabbar>
  </view>
</template>
<script setup>
import { computed, h, ref } from 'vue'
import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro';
import { useCounterStore } from '../stores/counter'
import path from 'path';

const List = [
  {
    title: '首页',
    icon: h(Home),
    path:'/pages/index/index'
  },
  {
    title: '反馈',
    icon: h(Category),
    path:'/pages/feedback/index'
  },
  {
    title: '我的',
    icon: h(My),
    path:'/pages/my/index'
  }
]
const active = ref(
  computed(() => useCounterStore().tabIndex)
)


const tabSwitch = (index,url) => {
  console.log(useCounterStore().tabIndex.tabTitle,"tabSwitch")
  useCounterStore().tabIndex = index
  Taro.switchTab({url})
}
</script>
